<template>
  <wxc-popup :show="visible"
             ref="wxcPopup"
             @wxcPopupOverlayClicked="beforeClose"
             pos="bottom"
             :height="height">
    <div class="popup-content"
         :style="{height: height}">
      <scroller class="scroller"
                :show-scrollbar="false"
                scroll-direction="horizontal">
        <div v-for="(tab, index) in tabs"
             :key="tab.id">
          <text class="tab-text"
                @click="onTabSelect(tab, index)">{{tab.geoName}}</text>
        </div>
        <div ref="lastTab">
          <text class="tab-text text-muted">{{fetching ? '加载中...' : '请选择'}}</text>
        </div>
      </scroller>
      <list class="flex popup-list">
        <cell v-for="list in addressList"
              :key="list.id"
              @click="onAddressSelect(list)">
          <text class="padding border-bottom">{{list.geoName}}</text>
        </cell>
      </list>
      <div class="flex-row popup-btns">
        <div class="popup-btn-border">
          <div class="flex popup-btn popup-btn-dismiss"
               @click="beforeClose">
            <text class="popup-btn-text">取消</text>
          </div>
          <div class="flex popup-btn popup-btn-confirm"
               @click="onSelect">
            <text class="popup-btn-text">确认</text>
          </div>
        </div>
      </div>
    </div>
  </wxc-popup>
</template>
<script>
import { WxcPopup } from 'weex-ui'
const dom = weex.requireModule('dom') || {}

export default {
  components: {
    WxcPopup
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    addressCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      height: weex.config.env.deviceHeight * 2 / 4,
      tabs: [],
      addressList: [],
      province: [],
      initTabs: [],
      initList: [],
      loading: false,
      initing: false
    }
  },
  computed: {
    fetching() {
      return this.loading || this.initing
    }
  },
  watch: {
    addressCode() {
      this.initWithCode()
    }
  },
  created() {
    if (this.addressCode) {
      this.initWithCode()
    } else {
      this.getProvince()
    }
  },
  mounted() { },
  methods: {
    beforeClose() {
      this.tabs = [...this.initTabs]
      if (this.initList.length) {
        this.addressList = [...this.initList]
      } else {
        this.getProvince()
      }
      this.$refs.wxcPopup.hide()
      setTimeout(() => {
        this.$emit('update:visible', false)
      }, 300)
    },
    initWithCode() {
      this.initing = true
      this.$http({
        method: 'GET',
        name: 'industrial.geo.details',
        data: {
          addressCode: this.addressCode
        }
      }).then(res => {
        const data = res || []
        this.tabs = [...data]
        this.initTabs = [...data]
      }).catch(err => { })
        .then(() => {
          this.initing = false
        })
      const code = Number.parseInt(this.addressCode) || 0
      if (code % 10e2 > 0) {
        // 村级
        this.getAddress(Math.floor(code / 10e2) * 10e2).then(res => {
          this.initList = [...res]
        })
      } else {
        // 下一级
        this.getAddress(this.addressCode).then(res => {
          this.initList = [...res]
        })
      }
    },
    getProvince() {
      if (this.province.length) {
        this.addressList = [...this.province]
      } else {
        this.getAddress().then(res => this.province = res)
      }
    },
    onAddressSelect(addressItem) {
      if (this.fetching) {
        return
      }
      if (addressItem.regionLever < 5) {
        this.tabs.push({ ...addressItem })
        this.getAddress(addressItem.id)
        const lastTabRef = this.$refs.lastTab
        if (lastTabRef) {
          dom.scrollToElement(lastTabRef, { offset: 500 })
        }
      } else {
        this.$emit('select', addressItem.id, this.getFullName())
        this.beforeClose()
      }
    },
    onTabSelect(tab, index) {
      this.tabs.splice(index)
      const len = this.tabs.length
      if (len) {
        this.getAddress(this.tabs[len - 1].id)
      } else {
        this.getProvince()
      }
    },
    onSelect() {
      const len = this.tabs.length
      if (len) {
        this.$emit('select', this.tabs[len - 1].id, this.getFullName())
      } else {
        this.$emit('select', '', '')
      }
      this.beforeClose()
    },
    getFullName() {
      return this.tabs.map(item => item.geoName).join(' ')
    },
    getAddress(addressCode = '') {
      return new Promise((resolve, reject) => {
        this.loading = true
        this.$http({
          method: 'GET',
          name: 'industrial.geo.tree',
          data: {
            addressCode: addressCode
          }
        }).then(res => {
          this.addressList = res
          resolve(res)
        }).catch(err => reject(err))
          .then(() => {
            this.loading = false
          })
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "../css/variables.scss";

.icon {
  font-family: alicon;
}
.popup-content {
  /* padding: 30px; */
}
.text-right {
  text-align: right;
  align-items: flex-end;
}
.text-muted {
  color: #999;
}
.flex {
  flex: 1;
}
.padding {
  padding: 30px;
}
.flex-row {
  flex-direction: row;
}
.mr-3 {
  margin-right: 15px;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: #eee;
}
.scroller {
  height: 100px;
  padding: 15px;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-color: #ddd;
}
.tab-text {
  padding: 15px;
  color: $primary;
  margin-right: 15px;
  // border-radius: 12px;
  // border-color: lighten($primary, 20%);
  // border-width: 1px;
  // background-color: lighten($primary, 45%);
}
.tab-text:active {
  background-color: lighten($primary, 35%);
}
.popup-list {
  /* padding: 30px; */
}
.popup-btns {
  padding: 10px;
  border-top-width: 1px;
  border-top-color: #ddd;
}
.popup-btn-border {
  flex: 1;
  flex-direction: row;
  border-radius: 12px;
  border-width: 1px;
  border-color: $accent;
}
.popup-btn {
  flex: 1;
  padding: 20px;
  color: $accent;
}
.popup-btn-dismiss {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background-color: lighten($accent, 45%);
}
.popup-btn-confirm {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: lighten($accent, 15%);
}
.popup-btn:active {
  background-color: lighten($accent, 35%);
}
.popup-btn-text {
  text-align: center;
}
</style>
